<template>
  <view class="box">
    <view :class="['boxBg', onLogin ? 'boxBgActive' : '']">
      <view :class="['bgText', onLogin ? 'bgTextActive' : '']">YEAT</view>
    </view>
    <view class="loginBox" :style="onLogin ? activeBoxStyle : {}">
      <loginVue />
    </view>
    <view class="registerBox" :style="!onLogin ? activeBoxStyle : {}">
      <registerVue />
    </view>
    <!-- <fui-animation :duration="500" :animationType="['slide-right']" :show="onLogin">
      <loginVue />
    </fui-animation>
    <fui-animation :duration="500" :animationType="['slide-left']" :show="!onLogin">
      <registerVue />
    </fui-animation> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import loginVue from "./components/login.vue";
import registerVue from "./components/register.vue";
import fuiAnimation from "@/components/firstui/fui-animation/fui-animation.vue";
import { onShow, onReady, onUnload, onLoad } from "@dcloudio/uni-app";
const onLogin = ref(true);
const activeBoxStyle = {
  transform: "translateX(0)",
  opacity: 1,
};
onLoad(() => {
  uni.$on("changeLogin", () => {
    onLogin.value = !onLogin.value;
  });
});
onUnload(() => {
  uni.$off("changeLogin");
});
</script>
<style scoped>
.box {
  width: 100%;
  height: calc(100vh - 120rpx);
  position: relative;
  overflow: hidden;
  padding-top: 300rpx;
}
.boxBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #222, #ddd);
  z-index: -1;
}
.boxBgActive {
  background: linear-gradient(45deg, #222, #ddd);
}
.bgText {
  width: fit-content;
  font-size: 600rpx;
  background: linear-gradient(to bottom, #ddd, #222);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: rotateZ(100deg) translate(30%, 30%);
  transition: all 1s;
}
.bgTextActive {
  transform: rotateZ(75deg) translate(20%, 50%);
}
.titleBar {
  background-color: red;
  z-index: 10;
}
.loginBox {
  position: absolute;
  top: 300rpx;
  left: 0;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.5s;
}
.registerBox {
  position: absolute;
  top: 300rpx;
  left: 0;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.5s;
}
</style>
